<template>
  <div class="basic">
    <a-form-model
    ref="ruleForm"
    :model="form"
    :rules="rules"
    >
      <a-form-model-item label="报表名称" prop="name">
        <a-input v-model="form.name" class="user_input" placeholder="为报表起一个名字吧！" />
      </a-form-model-item>
      <a-form-model-item label="说明" prop="remark">
        <a-textarea v-model="form.remark" class="user_input" placeholder="为自己写下一些说明信息吧！" />
      </a-form-model-item>
    </a-form-model>
  </div>
</template>

<script>
  export default {
    props: { form: Object},
    data() {
      return {
        rules: {
          name: [
            { required: true, message: '请输入报表名称', trigger: 'blur'}, 
            { max: 100, message: '最大长度限制为100个字符', trigger: 'blur' },
          ],
          remark: [
            { max: 255, message: '最大长度限制为255个字符', trigger: 'blur' }
          ]
        }
      }
    },
    mounted () {},
    methods: {
      rulesForm () {
        let isTrue = false
        this.$refs.ruleForm.validate(valid => {
          if (valid) {
            isTrue = true
          } else {
            isTrue = false
          }
        });
        return isTrue
      }
    },
    beforeDestroy () {}
  }
</script>

<style scoped>
.basic {
  height: 100%;
  margin: 50px auto;
}

.user_input{
  width: 400px;
}

.ant-row.ant-form-item{
  display: flex;
}

.ant-row.ant-form-item>>>.ant-col.ant-form-item-label {
  width: 85px;
}
</style>